<template>
  <div class="header">
    <div class="export" style="margin-bottom: 20px">
      <el-upload name="fileStream" :show-file-list="false" class="upload-demo"
        action="http://47.117.36.70/platform/impInventory" accept=".xlsx, .xls,.xlsm, .xlsb,.xltm,.xltx"
        :auto-upload="true" :on-change="handleFileUploadProgress" :headers="headers">
        <el-button type="primary" :loading="loading">上传并导入</el-button>
      </el-upload>
      <div class="title" v-if="title">{{ title }}</div>
      <!-- <el-button type="primary" @click="upload" style="margin-left: 10px" :loading="loading">导入</el-button> -->
    </div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="物料编码:">
        <el-input v-model="formInline.materialCode" placeholder="" clearable />
      </el-form-item>
      <el-form-item label="物料扩展编码:">
        <el-input v-model="formInline.extendCode" placeholder="" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="downLoad">下载模板</el-button>
      </el-form-item>
    </el-form>
  </div>

  <el-table :data="tableData" style="width: 100%" :header-cell-style="{ textAlign: 'center' }"
    :cell-style="{ textAlign: 'center' }" height="70vh">
    <el-table-column label="物料编码" prop="materialCode"> </el-table-column>
    <el-table-column label="物料扩展编码" prop="extendCode"> </el-table-column>
    <el-table-column label="库龄(月)" prop="monthAge"> </el-table-column>
    <el-table-column label="库龄(日)" prop="dayAge"> </el-table-column>
  </el-table>
  <el-pagination style="margin-top: 20px" v-model:current-page="page.pagenum" v-model:page-size="page.size" background
    layout="total, prev,sizes, pager, next" :total="page.total" @size-change="handleSizeChange"
    @current-change="handleCurrentChange" />
  <Dialog ref="dialogRef"></Dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import Dialog from '@/views/goods/cpns/dialog.vue'
import { ElMessage } from 'element-plus'
import { getKl } from '@/utils/api.js'
import request from '@/utils/request.js'

const page = reactive({
  pagenum: 1,
  size: 10,
  total: 0
})
const title = ref('')
const filePath = ref('')
const loading: any = ref(false)
const formInline = reactive({
  extendCode: '',
  materialCode: ''
})
const headers = { token: JSON.parse(localStorage.getItem('loginInfo')!).token }
let tableData = ref([])
//size大小切换
const handleSizeChange = (e: any) => {
  page.size = e
  onSubmit()
}
//当前页切换
const handleCurrentChange = (e: any) => {
  page.pagenum = e
  onSubmit()
}
const onSubmit = () => {
  getKl({ pageNum: page.pagenum, pageSize: page.size, ...formInline }).then((res: any) => {
    tableData.value = res.data.inventoryList
    console.log(tableData.value, '222')
    page.total = res.data.total
  })
}
const handleFileUploadProgress = (e: any) => {
  loading.value = true
  if (e.status == 'fail') {
    loading.value = false
    ElMessage.error('上传失败')
    return
  }
  if (e.status == 'success') {
    title.value = e.name
    filePath.value = e.response.data
    loading.value = false
    ElMessage.success('上传成功')
  }
}
const upload = async () => {
  if (!title.value) {
    ElMessage.error('请先上传文件')
    return
  }
  let formData = new FormData()
  formData.append('filePath', filePath.value)
  const res = await request.post('/impInventory', formData)
  if (res.msg == 'ok') {
    ElMessage.success('导入成功')
  }
}
const downLoad = () => {
  if (process.env.NODE_ENV == "development") {
    window.location.href = `http://47.117.36.70/platform/downloadInventoryTemplate`;
  } else {
    const host = window.location.protocol + "//" + window.location.host;
    window.location.href = `${host}/platform/downloadInventoryTemplate`;
  }
}
onMounted(() => {
  onSubmit()
})
</script>

<style scoped lang="scss">
.el-menu {
  // margin: 20px 0;
  // padding-bottom: 20px;
  margin-bottom: 20px;
  width: 100%;

  .el-menu--horizontal.el-menu {
    border: none;
  }
}

.export {
  display: flex;
  align-items: center;
}

.title {
  margin: 0px 20px;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>